<div body-class class="dashboard"
	 ng-class="{'dashboard-fullscreen': dashboardViewState.fullscreen}">

	<div ng-include="'app/partials/dashboard_topnav.html'">
	</div>

	<div ng-if="submenuEnabled" ng-include="'app/partials/submenu.html'">
	</div>

	<div class="clearfix"></div>

	<div dash-editor-view>
	</div>

	<div class="main-view-container">
		<div class="grafana-row" ng-controller="RowCtrl"
			 ng-repeat="(row_name, row) in dashboard.rows" row-height>
			<div class="row-control">
				<div class="row-control-inner">
					<div class="row-close" ng-show="row.collapse"
						 data-placement="bottom">
						<div class="row-close-buttons">
							<span class="row-button bgPrimary"
								  ng-click="toggle_row(row)">
								<i bs-tooltip="'Expand row'"
								   data-placement="right"
								   class="icon-caret-left pointer"></i>
							</span>
						</div>
						<div class="row-text pointer" ng-click="toggle_row(row)"
							 ng-bind="row.title"></div>
					</div>
					<div class="row-open" ng-show="!row.collapse">
						<div class='row-tab bgSuccess dropdown'
							 ng-show="row.editable">
							<span class="row-tab-button dropdown-toggle"
								  data-toggle="dropdown">
								<i class="icon-th-list"></i>
							</span>
							<ul class="dropdown-menu dropdown-menu-right"
								role="menu" aria-labelledby="drop1">
								<li>
									<a ng-click="toggle_row(row)">Collapse
										row</a>
								</li>
								<li class="dropdown-submenu">
									<a href="javascript:void(0);">Add Panel</a>
									<ul class="dropdown-menu">
										<li bindonce
											ng-repeat="name in panelNames">
											<a ng-click="add_panel_default(name)"
											   bo-text="name"></a>
										</li>
									</ul>
								</li>
								<li class="dropdown-submenu">
									<a href="javascript:void(0);">Set height</a>
									<ul class="dropdown-menu">
										<li><a ng-click="set_height('25px')">25
											px</a></li>
										<li><a ng-click="set_height('100px')">100
											px</a></li>
										<li><a ng-click="set_height('150px')">150
											px</a></li>
										<li><a ng-click="set_height('200px')">200
											px</a></li>
										<li><a ng-click="set_height('250px')">250
											px</a></li>
										<li><a ng-click="set_height('300px')">300
											px</a></li>
										<li><a ng-click="set_height('350px')">350
											px</a></li>
										<li><a ng-click="set_height('450px')">450
											px</a></li>
										<li><a ng-click="set_height('500px')">500
											px</a></li>
										<li><a ng-click="set_height('600px')">600
											px</a></li>
										<li><a ng-click="set_height('700px')">700
											px</a></li>
									</ul>
								</li>
								<li class="dropdown-submenu">
									<a href="javascript:void(0);">Move</a>
									<ul class="dropdown-menu">
										<li><a ng-click="move_row(-1)">Up</a>
										</li>
										<li><a ng-click="move_row(1)">Down</a>
										</li>
									</ul>
								</li>
								<li>
									<a dash-editor-link="app/partials/roweditor.html">Row
										editor</a>
								</li>
								<li>
									<a ng-click="delete_row()">Delete row</a>
								</li>
							</ul>
						</div>
					</div>
				</div>

				<div class="panels-wrapper" ng-if="!row.collapse">
					<div class="row-text pointer" ng-click="toggle_row(row)"
						 ng-if="row.showTitle" ng-bind="row.title">
					</div>

					<!-- Panels, draggable needs to be disabled in fullscreen because Firefox bug -->
					<div ng-repeat="(name, panel) in row.panels"
						 class="panel"
						 ui-draggable="{{!dashboardViewState.fullscreen}}"
						 drag="panel.id"
						 ui-on-Drop="onDrop($data, row, panel)"
						 drag-handle-class="drag-handle" panel-width
						 ng-model="panel">
						<grafana-panel type="panel.type"
									   ng-cloak></grafana-panel>
					</div>

					<div panel-drop-zone class="panel panel-drop-zone"
						 ui-on-drop="onDrop($data, row)"
						 data-drop="true">
						<div class="panel-container"
							 style="background: transparent">
							<div style="text-align: center">
								<em>Drop here</em>
							</div>
						</div>
					</div>

					<div class="clearfix"></div>
				</div>
			</div>
		</div>

		<div ng-show='dashboard.editable' class="row-fluid add-row-panel-hint">
			<div class="span12" style="text-align:right;">
				<span style="margin-right: 10px;" ng-click="add_row_default()"
					  class="pointer btn btn-info btn-mini">
					<span><i class="icon-plus-sign"></i> ADD A ROW</span>
				</span>
			</div>
		</div>

	</div>

	<div ng-include="'app/partials/console.html'" ng-if="consoleEnabled">
	</div>

</div>
